<template>
  <div class="driving_save" >
    <el-form ref="form" :model="form" label-width="80px" >

      <!--车牌下拉框-->
      <el-form-item label="车牌号码" >
        <el-select v-model="form.carId" placeholder="请选择违车牌号码" @change="nextDate()" :disabled=true>
          <el-option
            v-for="item in carList"
            :key="item.id"
            :label="item.carNo"
            :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="经办人" >
        <el-select v-model="form.operator" placeholder="请选择经办人">
          <el-option
            v-for="item in driverList"
            :key="item.id"
            :label="item.name"
            :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>

      <!--保养类型下拉框-->
      <el-form-item label="保养类别" >
        <el-select v-model="form.mainType" placeholder="请选择保养类别">
          <el-option
            v-for="item in dictionaryList"
            :key="item.id"
            :label="item.text"
            :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>

      <!--保养单位下拉框-->
      <el-form-item label="保养单位" >
        <el-select v-model="form.mainUnit" placeholder="请选择违章项目">
          <el-option
            v-for="item in currentUnitList"
            :key="item.id"
            :label="item.unitName"
            :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>

      <!--保养时间-->
      <el-form-item label="保养时间">
        <el-col :span="11">
          <el-date-picker
            type="date"
            placeholder="选择日期"
            v-model="form.mainDate"
            style="width: 100%;"
            value-format="yyyy-MM-dd"
            @change="nextDate()"></el-date-picker>
        </el-col>
      </el-form-item>

      <!--下次保养时间-->
      <el-form-item label="下次保养时间">
        <el-col :span="11" >
          <el-date-picker
            type="date"
            placeholder="选择日期"
            v-model="form.nextDate"
            style="width: 100%;"
            :disabled=true
          >
          </el-date-picker>
        </el-col>
      </el-form-item>

      <!--保养金额-->
      <el-form-item label="保养金额">
        <el-input v-model="form.mainAmount"></el-input>
      </el-form-item>

      <!--本次保养里程-->
      <el-form-item label="本次保养里程" >
        <el-input v-model="form.mainMil" @change="nextMil"></el-input>
      </el-form-item>

      <el-form-item label="保养内容" >
        <el-input v-model="form.mainContent"></el-input>
      </el-form-item>

      <!--下次保养里程-->
      <el-form-item label="下次保养里程" >
        <el-input v-model="form.nextMil" :disabled=true></el-input>
      </el-form-item>

      <!--保养备注-->
      <el-form-item label="保养备注">
        <el-input v-model="form.remarks"></el-input>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="updateMaintainRecord">立即修改</el-button>
        <el-button>取消</el-button>
      </el-form-item>

    </el-form>
  </div>
</template>
<style>
.driving_save {
  width: 800px;
}
</style>

<script>
import maintainApi from "@/api/maintain_cjl_byjl.js";
export default {
  data() {
    return {
      //需要汽车记录集合
      carList: {},
      //需要字典集合
      driverList: {},
      //需要驾驶员集合
      dictionaryList: {},
      //保养单位
      currentUnitList: {},
      selectCarId: '',
      formMainDate: '',

      //封装需保存的对象
      form: {
        id: '',
        carId: '',
        mainType: '',
        mainDate: '',
        mainAmount: '',
        mainUnit: '',
        mainMil: '',
        mainContent: '',
        nextDate: '',
        nextMil: '',
        operator: '',
        remarks: '',

      },


    }
  },
  created() {
    this.findAll()
    this.init()
  },
  methods: {
    init() {
      const id  =this.$route.params.id;
      this.recordFindById(id);

    },


    findAll() {
      maintainApi.findAllMaintainNeed().then((response) => {
        this.carList = response.data.carList;
        this.driverList = response.data.driverList;
        this.dictionaryList = response.data.dictionaryList;
        this.currentUnitList = response.data.currentUnitList;
        // this.form = response.data.maintain;
      })
    },

    nextDate() {
      console.log("carId"+this.form.carId+"mainDate"+this.form.mainDate)
      this.selectCarId = this.form.carId
      this.formMainDate = this.form.mainDate
      maintainApi.findCarById(this.selectCarId,this.formMainDate).then((response) => {
        this.form.nextDate = response.data.time
        console.log("formdate"+this.form.nextDate)
      })
    },

    nextMil() {
      console.log("获取下次里程+++++++++++++")
      maintainApi.findMil(this.form.carId,this.form.mainMil).then((response) => {
        this.form.nextMil = response.data.nextMil
      })
    },

    updateMaintainRecord() {
      maintainApi.updateMaintainRecord(this.form).then((response) => {
        this.$message({
          message: "修改成功",
          type: "success",
        });
        this.$router.push({ path: "/daily_work/maintain_record"});
      })
    },

    recordFindById(id) {
      maintainApi.maintainFindById(id).then((response) => {
        this.form = response.data.findById
      })
    }
  }
}
</script>

<style>

</style>
